import { Upload, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getToken } from 'utils/token';
import { useState } from 'react';
export default function Index() {
  const [imgs, setImgs] = useState([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }
  ])
  const props = {
    fileList: imgs,
    name: 'image',
    action: 'http://geek.itheima.net/v1_0/upload',
    headers: {
      Authorization: `Bearer ${getToken()}`,
    },
    onChange(info) {
      setImgs(info.fileList)
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    accept: '.png',
    beforeUpload(file) {
      // console.log(25, file);
      const isType = ['image/png'].includes(file.type)
      console.log(file.type, isType);
      if (!isType) {
        message.error(`${file.name} 图片格式不支持.`);
      }
      return isType ? Blob : Upload.LIST_IGNORE
    },
    onPreview(file) {
      console.log(file);
      setPreviewImage(file.thumbUrl)
    }
  };
  const [previewImage, setPreviewImage] = useState('')
  return <>
    <Upload {...props} listType='picture-card' >
      {imgs.length < 3 ? <PlusOutlined /> : null}
    </Upload>
    <Modal
      visible={previewImage !== ''}
      title={'图片预览'}
      footer={null}
      onCancel={() => setPreviewImage('')}
    >
      <img alt="example" style={{ width: '100%' }} src={previewImage} />
    </Modal>
  </>
}